<template>
  <div class="hello">
    <el-container>
      <el-header>Jabil Boston PDA</el-header>
      <el-main v-if="showTab">
        <div class="divG">
          <div class="label">Equipment：</div>
          <div class="val">{{ objNum }}</div>
        </div>
        <div class="divG" style="margin-bottom: 30px">
          <div class="label">IP：</div>
          <div class="val" v-if="ipStatus">{{ ipUrl }}</div>
          <el-input v-model="ipUrl" size="mini" v-else></el-input>
        </div>
        <el-button type="primary" v-if="ipStatus" @click="ipStatus = false"
          >Setting</el-button
        >
        <el-button type="primary" v-else @click="changeIP">Modify</el-button>
        <!-- <el-button type="primary">重新拉取数据</el-button> -->
      </el-main>

      <el-main v-else>
        <!-- 首页 -->
          <div class="tit">Production Line Handing</div>

        <div class="Btn-div" >
          <div class="btnD" @click="toRouter('/pl')">
            <div class="full-car"></div>
            <div>PL to Wrap</div>
          </div>
          <div class="btnD" @click="toRouter('/ept')">
            <div class="empty-car"></div>
            <div>Ept Stk to Wrap</div>
          </div>
          
        </div>
          <div class="tit" style="margin-top:30px">Manual Operation</div>

        <div class="Btn-div">
          <div class="btnD" @click="toRouter('/unbind')">
            <div class="unlock-car"></div>
            <div>Unbind Pallet</div>
          </div>
          <div class="btnD" @click="toRouter('/bind')">
            <div class="lock-car"></div>
            <div>Bind Pallet</div>
          </div>
        </div>
        <!-- 第二页 -->
       
      </el-main>
      <el-footer>
        <div class="divs">
          <div
            @click="
              showTab = true;
            "
          >
            <div :class="showTab ? 'icon-homeC' : 'icon-home'"></div>
            <div :class="showTab ? 'font-colorC' : ''">Home</div>
          </div>

          <div @click="showTab = false">
            <div :class="!showTab ? 'icon-home1C' : 'icon-home1'"></div>
            <div :class="!showTab ? 'font-colorC' : ''">Tasks</div>
            <!-- <router-link to="/about">About</router-link> -->
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "HomeMain",
  props: {
    msg: String,
  },
  data() {
    return {
      ipStatus: true,
      userName: "张三",
      loginTime: "2023-02-03 19:58:04",
      objNum: "PDA",
      ipUrl: "",
      formLabelAlign: {
        input1: "当前用户",
        input2: "登录时间",
        input3: "设备编号",
        input4: "ip地址",
      },
    };
  },
  created() {
    this.ipUrl = localStorage.getItem("baseApi");
  },
  watch: {
    ipUrl(val) {
      localStorage.setItem("baseApi", val);
      this.$store.commit("baseApi", val);
      //  console.log(this.baseApi);
    },
  },
  computed: {
    showTab: {
      get() {
        return this.$store.state.showTab;
      },
      set(v) {
        this.$store.state.showTab = v;
      },
    },
   
  },
  methods: {
    changeIP() {
      this.ipStatus = true;
    },
    toRouter(name){
       this.$router.push({ path: name });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.tit{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.Btn-div {
  display: flex;
  margin-bottom: 20px;
}
.btnD {
  width: 85px;
  height: 85px;
  border: 1px solid black;
  margin-right: 16px;
  text-align: center;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.lock-car {
  width: 30px;
  height: 30px;
  background: url("@/assets/lock.png") no-repeat 0px/100%;
  margin: 0 auto;
}
.unlock-car {
  width: 30px;
  height: 30px;
  background: url("@/assets/unlock.png") no-repeat 0px/100%;
  margin: 0 auto;


}
.empty-car {
  width: 30px;
  height: 30px;
  background: url("@/assets/empty.png") no-repeat 0px/100%;
  margin: 0 auto;
  margin-top: 12px;
}
.full-car {
  width: 30px;
  height: 30px;
  background: url("@/assets/full.png") no-repeat 0px/100%;
  margin: 0 auto;
  margin-top: 12px;
}
.change-car {
  width: 30px;
  height: 30px;
  background: url("@/assets/change.png") no-repeat 0px/100%;
  margin: 0 auto;
}
.icon-home {
  width: 30px;
  height: 30px;
  background: url("@/assets/home1.png") no-repeat 0px/100%;
  margin: 0 auto;
  margin-top: 8px;
}
.icon-homeC {
  width: 30px;
  height: 30px;
  background: url("@/assets/home2.png") no-repeat 0px/100%;
  margin: 0 auto;
  margin-top: 8px;
}
.icon-home1 {
  width: 30px;
  height: 28px;
  background: url("@/assets/task1.png") no-repeat 0px/100%;
  margin: 0 auto;
  margin-top: 9px;
}
.icon-home1C {
  width: 30px;
  height: 28px;
  background: url("@/assets/task2.png") no-repeat 0px/100%;
  margin: 0 auto;
  margin-top: 9px;
}
.divG {
  display: flex;
  border-bottom: 1px solid rgb(203, 198, 198);
  padding-bottom: 5px;
  color: #838282;
  margin-bottom: 16px;
  // width: 100vw;
}
.font-colorC {
  color: #17abe3;
}
.divs {
  display: flex;
  height: 100%;
}
.divs > div {
  width: 50%;
  text-align: center;
  font-size: 10px;
}
.label {
  width: 30vw;
}
.val {
  width: 68vw;
}
.el-main {
  font-size: 15px;
  .el-input {
    width: 80vw;
    .el-input__inner {
      height: 10vw;
      font-size: 15px;
    }
  }
  .el-button {
    width: 90vw;
    margin: 10px 0px;
  }
}
.el-header {
  background-color: #303030;
  color: #fff;
  text-align: left;
  line-height: 60px;
  width: 100vw;
  font-size: 20px;
}

.el-footer {
  border-radius: 7px;
  width: 100vw;
  position: fixed;
  bottom: 0px;
  background-color: #dddddd;
  padding: 0px !important;
}
</style>
